<template>
  <div>
    <div class="add-button" @click="addItem" v-if="!disabled">
      <PlusCircleFilled />
      添加红线
    </div>
    <div class="item" v-for="(item, index) in list" :key="index">
      <div class="first-col">
        <div class="relation" v-if="index > 0">且</div>
        <a-form-item
          class="identifier-item"
          :name="['alertInfo', index, 'identifier']"
          :rules="{
            required: true,
            message: '请选择',
            trigger: 'change',
          }"
          v-bind="$attrs"
        >
          <a-select
            ref="identifierRef"
            v-model:value="item.identifier"
            :options="identifierOptions"
            @change="(e) => changeIdentifier(e, index)"
            allowClear
            :fieldNames="fieldNames"
            :class="{ identifier: index > 0 }"
            v-bind="$attrs"
            :disabled="disabled"
          />
        </a-form-item>
      </div>
      <a-form-item
        class="identifier-item"
        :name="['alertInfo', index, 'type']"
        :rules="{
          required: true,
          message: '请选择',
        }"
      >
        <a-select
          v-model:value="item.type"
          :options="typeOptions"
          :style="{ width: '100px' }"
          class="type"
          @change="(e) => changeType(e, index)"
          v-bind="$attrs"
          :disabled="disabled"
        />
      </a-form-item>
      <a-form-item
        class="identifier-item"
        :name="['alertInfo', index, 'threshold']"
        :rules="{
          required: true,
          message: '请输入',
        }"
      >
        <a-inputNumber
          v-model:value="item.threshold"
          class="input-number"
          @change="(e) => changeThreshold(e, index)"
          v-bind="$attrs"
          :disabled="disabled"
        />
      </a-form-item>
      <a-form-item>
        <MinusCircleFilled class="minus" @click="delItem(index)" v-if="!disabled" />
      </a-form-item>
    </div>
  </div>
</template>
<script setup lang="ts">
import { PlusCircleFilled, MinusCircleFilled } from '@ant-design/icons-vue';
import { isFunction, isArray, get } from 'lodash';
import { defHttp } from '@/utils/http';
interface BaseItem {
  identifier: string;
  type: string;
  threshold: number;
}
const typeOptions = [
  {
    value: 'LE',
    label: '小于等于',
  },
];
const emit = defineEmits(['update:value', 'change']);
const props = defineProps({
  value: {
    type: Array<BaseItem>,
    default: () => [],
  },
  api: {
    type: String,
    required: true,
  },
  fieldNames: {
    type: Object,
  },
  resultField: {
    type: String,
  },
  disabled: {
    type: Boolean,
  },
});
const list = ref<BaseItem[]>([]);
const identifierOptions = ref();
watch(
  () => props.value,
  (newVal: any) => {
    list.value = newVal;
  },
  {
    immediate: true,
  },
);

onMounted(async () => {
  await fetchIdentifierOptions();
});

const fetchIdentifierOptions = async () => {
  const fetchApi = isFunction(props.api) ? props.api : () => defHttp.get({ url: props.api });
  const res = await fetchApi();
  if (isArray(res)) {
    identifierOptions.value = res;
    return;
  }
  if (props.resultField) {
    identifierOptions.value = get(res, props.resultField) || [];
  }
};
const addItem = () => {
  list.value.push({
    identifier: '',
    type: '',
    threshold: 0,
  });
};
const delItem = (index: number) => {
  list.value.splice(index, 1);
};

const changeIdentifier = (value: any, index: number) => {
  list.value[index].identifier = value;
  emitChange();
};

const changeType = (value: any, index: number) => {
  list.value[index].type = value;
  emitChange();
};

const changeThreshold = (value: any, index: number) => {
  list.value[index].threshold = value;
  emitChange();
};

function emitChange() {
  emit('update:value', list.value);
  emit('change', list.value);
}
</script>
<style lang="less" scoped>
.item {
  width: 100%;
  display: flex;
  align-items: center;
  .first-col {
    display: flex;
    flex: 1;
    margin-right: 8px;
    .relation {
      border: 1px solid #dbdbdb;
      border-radius: 4px 0 0 4px;
      border-right: none;
      display: inline-block;
      height: 32px;
      padding: 6px 8px;
      text-align: center;
      vertical-align: middle;
      width: 36px;
      color: #8b8b8b;
    }
    .identifier-item {
      flex: 1;
    }
  }
  .input-number {
    border-left: none;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
  }
  .identifier {
    :deep(.ant-select-selector, ) {
      border-top-left-radius: 0px !important;
      border-bottom-left-radius: 0px !important;
    }
  }
  .type {
    :deep(.ant-select-selector) {
      border-top-right-radius: 0px !important;
      border-bottom-right-radius: 0px !important;
    }
  }
  .minus {
    color: #adadad;
    margin-left: 12px;
    cursor: pointer;
    &:hover {
      color: #ff4d4f;
    }
  }
}
.add-button {
  cursor: pointer;
  color: #2590ff;
  margin-top: 6px;
  margin-bottom: 12px;
}
</style>
